<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>XIAOWUMIN AI</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/socket.io/4.7.5/socket.io.min.js"></script>
    <script src="./ty.js"></script>
    <style>
        #output {
            display: inline;
        }

        .cursor {
            display: inline-block;
            width: 10px;
            height: 20px;
            background-color: black;
            vertical-align: text-bottom;
            animation: blink 1s infinite;
        }

        @keyframes blink {
            50% {
                opacity: 0;
            }
        }
    </style>
    <link rel="stylesheet" href="gpt.css">
</head>

<body>
    <!-- <div id="output"></div><span class="cursor" id="cursor"></span> -->
    <div class="top"></div>
    <div class="content scrollbar" id="main">

    </div>
    <div class="input" id="ipt">
        <div class="in scrollbar" contenteditable="true" id="text"></div>
        <div class="btn" onclick="sand()"><svg width="27" height="27" viewBox="0 0 48 48" fill="none"
                xmlns="http://www.w3.org/2000/svg">
                <path d="M24 6V42" stroke="#2f2f2f" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
                <path d="M12 18L24 6L36 18" stroke="#2f2f2f" stroke-width="4" stroke-linecap="round"
                    stroke-linejoin="round" />
            </svg>
        </div>

    </div>
    <div class="type">

        <div class="title">XIAOWUMIN AI 也可能会犯错。请核查重要信息。</div>
    </div>
    <div style="display: none;" id="ttext">

    </div>
</body>
<script>/*
<div class="item">
<div class="user">
</div>
</div>
<div class="item">
<div class="ai">
</div>
</div>
*/
    if (localStorage.getItem("user") == null) {
        location.href = "./login.html";
    }
    let socket = io()
    socket.on("sand", function (data) {
        let main = document.getElementById("main");
        console.log(data[0][0].user, localStorage.getItem("user"));
        main.scrollTop = main.scrollHeight;
        if (data[0][0].user == localStorage.getItem("user")) {
            for (let i = 0; i < data[0].length; i++) {
                if (data[0][i].from == "user") {
                    let box = document.createElement("div");
                    box.className = "item";
                    let user = document.createElement("div");
                    user.className = "user";
                    user.innerHTML = data[0][i].content;
                    let h = user.offsetHeight;
                    box.style.height = h + "px";
                    box.appendChild(user);
                    main.appendChild(box);
                } else if (data[0][i].from == "ai") {
                    let box = document.createElement("div");
                    box.className = "item";
                    let ai = document.createElement("div");
                    ai.className = "ai";
                    ai.innerHTML = '<img src="./lo.gif" alt="" />';
                    ai.id = data[0][i].id;
                    let h = ai.offsetHeight;
                    box.style.height = h + "px";
                    box.appendChild(ai);
                    main.appendChild(box);
                    console.log(data[0][i].id);

                }
            }

        }
        main.scrollTop = main.scrollHeight;
    })

    socket.on("change", function (data) {
        console.log(data);
        console.log(data[0].user, localStorage.getItem("user"));

        if (data[0].user == localStorage.getItem("user")) {
            let dom = document.getElementById(data[0].id);
            typeText(dom, data[0].content, data[1], function () {
                Cancel(true);
            });
        }
    })


    //const givenTextElement = document.getElementById("givenText");
    //const outputElement = document.getElementById("output");
    //const givenText = givenTextElement.innerHTML;

    //typeText(outputElement, givenText, 100); // 设置打字速度，单位为毫秒

    function Cancel(can) {
        let ipt = document.getElementById("ipt");
        if (can) {
            if (ipt.classList.contains("cancel")) {
                ipt.classList.remove("cancel");
            }
        } else {
            if (!ipt.classList.contains("cancel")) {
                ipt.classList.add("cancel");
            }
        }
    }

    function sand() {
        let text = document.getElementById("text");
        if (text.innerHTML == "") {
            alert("请输入内容");
            return;
        }
        socket.emit("sand", {
            username: localStorage.getItem("user"),
            from: "user",
            content: text.innerHTML,
        });
        text.innerHTML = "";
        Cancel(false);
    }

    function renderList(list) {
        let cont = document.getElementById("main");
        for (let i = 0; i < list.length; i++) {
            if (list[i].from == "user") {
                let box = document.createElement("div");
                box.className = "item";
                let user = document.createElement("div");
                user.className = "user";
                user.innerHTML = list[i].content;
                box.appendChild(user);
                cont.appendChild(box);
                let height = user.offsetHeight;
                box.style.height = height + "px";
            } else {
                let box = document.createElement("div");
                box.className = "item";
                let ai = document.createElement("div");
                ai.className = "ai";
                ai.innerHTML = list[i].content;
                ai.id = list[i].id;
                box.appendChild(ai);
                cont.appendChild(box);
                let height = ai.offsetHeight;
                box.style.height = height + "px";
            }
        }
        // 滚动到底部
        cont.scrollTop = cont.scrollHeight;
    }

    fetch("/getList?username=" + localStorage.getItem("user")).then(res => res.json()).then((data) => {
        if (data.code == 200) {
            renderList(data.data);
        }else {
            localStorage.removeItem("user");
            window.location.href = "/login.html";
        }
        
    })
</script>

</html>